<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>neumorphism ui</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik&amp;display=swap">
		<link rel="stylesheet" href="./musicPlayer.css" />
	</head>
	<body>
	  <div class="row" style="max-width: 100vw;min-height: 100vh; margin: 0;">
	    <div class="themed-block col-12 col-lg-6 py-5">
	      <div class="neumorphic-card d-flex flex-column mx-auto" style="width: 350px; max-width: 100vw;">
	        <div class="d-flex">
	          <button type="button" class="btn neumorphic-btn neumorphic-btn_fab"><i class="fa fa-arrow-left"></i></button>
	          <div class="neumorphic-text flex-grow-1 my-auto text-center">PLAYING NOW</div>
	          <button type="button" class="btn neumorphic-btn neumorphic-btn_fab"><i class="fa fa-bars"></i></button>
	        </div>
	        <div class="neumorphic-card__body">
	          <div class="neumorphic-image-wrapper">
	            <image src="https://images.pexels.com/photos/251603/pexels-photo-251603.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" style="max-height: 100%; transform: translateX(-50%); margin-left: 50%;"/>
	          </div>
	          <div class="neumorphic-text neumorphic-text_title text-center mt-5">Song name</div>
	          <div class="neumorphic-text text-center mt-1 mb-5">Band or singer name</div>
	          <div class="neumorphic-slider mx-auto" onselectstart="return false">
	            <div class="neumorphic-slider__text neumorphic-slider__text_left">1:36</div>
	            <div class="neumorphic-slider__back"></div>
	            <div class="neumorphic-slider__line"></div>
	            <div class="neumorphic-slider__thumb"></div>
	            <div class="neumorphic-slider__text neumorphic-slider__text_right">4:00</div>
	          </div>
	          <div class="mt-5 mb-3 d-flex w-100 player-controls">
	            <button type="button" class="btn neumorphic-btn neumorphic-btn_fab mx-auto"><i class="fa fa-backward"></i></button>
	            <button type="button" class="btn neumorphic-btn neumorphic-btn_fab neumorphic-btn_primary mx-auto"><i class="fa fa-pause"></i></button>
	            <button type="button" class="btn neumorphic-btn neumorphic-btn_fab mx-auto"><i class="fa fa-forward"></i></button>
	          </div>
	        </div>
	      </div>
	    </div>
	    <div class="themed-block col-12 col-lg-6 py-5">
	      <div class="neumorphic-card-black d-flex flex-column mx-auto" style="width: 350px; max-width: 100vw;">
	        <div class="d-flex">
	          <button type="button" class="btn neumorphic-btn neumorphic-btn_fab"><i class="fa fa-arrow-left"></i></button>
	          <div class="neumorphic-text flex-grow-1 my-auto text-center">PLAYING NOW</div>
	          <button type="button" class="btn neumorphic-btn neumorphic-btn_fab"><i class="fa fa-bars"></i></button>
	        </div>
	        <div class="neumorphic-card__body">
	          <div class="neumorphic-image-wrapper">
	            <image src="https://images.pexels.com/photos/333850/pexels-photo-333850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" style="max-height: 100%; transform: translateX(-50%); margin-left: 50%;"/>
	          </div>          
	          <div class="neumorphic-text neumorphic-text_title text-center mt-5">Song name</div>
	          <div class="neumorphic-text text-center mt-1 mb-5">Band or singer name</div>
	          <div class="neumorphic-slider mx-auto" onselectstart="return false">
	            <div class="neumorphic-slider__text neumorphic-slider__text_left">1:36</div>
	            <div class="neumorphic-slider__back"></div>
	            <div class="neumorphic-slider__line"></div>
	            <div class="neumorphic-slider__thumb"></div>
	            <div class="neumorphic-slider__text neumorphic-slider__text_right">4:00</div>
	          </div>
	          <div class="mt-5 mb-3 d-flex w-100 player-controls">
	            <button type="button" class="btn neumorphic-btn neumorphic-btn_fab mx-auto"><i class="fa fa-backward"></i></button>
	            <button type="button" class="btn neumorphic-btn neumorphic-btn_fab neumorphic-btn_primary mx-auto"><i class="fa fa-pause"></i></button>
	            <button type="button" class="btn neumorphic-btn neumorphic-btn_fab mx-auto"><i class="fa fa-forward"></i></button>
	          </div>
	        </div>
	      </div>
	    </div>
	  </div>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/popper.min.js"></script>
	  <script src="./musicPlayer.js"></script>
	</body>
</html>